 
<template>

  <Main :user="user" :records="list"></Main>
</template>

<script>
import Main from "../components/main";
import api from "@/api/api";
export default {
  name: "app",
  data() {
    return {
      list: [],
      user: {},
      timer:null
    };
  },
  components: { Main },
  created() {
    var that = this;
    var para = {
      UserID: this.$store.state.userInfo.ID,
      FromUserID: this.$route.query.FromUserID
    };
    api.getMsgList(para).then(res => {
      this.user = res.user;
      res.list.forEach(n => {
        this.list.push({
          type: n.FromUserID==this.$store.state.userInfo.ID?2:1,
          time: n.NoticeTime,
          content:n.Info,
          HeadImg:n.HeadImg
        });
      });
    });
    this.timer = setInterval(function(){
      api.getNewMsg(para).then(res => {
      res.forEach(n => {
        that.list.push({
          type: n.FromUserID==that.$store.state.userInfo.ID?2:1,
          time: n.NoticeTime,
          content:n.Info,
          HeadImg:n.HeadImg
        });
      });
    });
    },5000)
  },
  beforeDestroy(){
    if(this.timer){
      clearInterval(this.timer)
    }
  },
  methods: {
    //向上滚动加载数据
    getUpperData() {
      var me = this;

      // 这里为模拟异步加载数据
      // 实际上你可能要这么写:
      // return axios.get('xxx').then(function(result){
      //     return result;  //result的格式需要类似下面resolve里面的数组
      // })
      return new Promise(function(resolve) {
        setTimeout(function() {
          //模拟加载完毕
          if (me.upperTimes > 3) {
            return resolve([]);
          }

          //加载数据
          resolve([
            {
              direction: 2,
              id: me.upperId - 1,
              type: 1,
              content: "向上滚动加载第 " + me.upperTimes + " 条！",
              ctime: new Date().toLocaleString()
            },
            {
              direction: 1,
              id: me.upperId - 2,
              type: 1,
              content: "向上滚动加载第 " + me.upperTimes + " 条！",
              ctime: new Date().toLocaleString()
            }
          ]);
        }, 1000);
        me.upperId = me.upperId + 2;
        me.upperTimes++;
      });
    },
    getUnderData() {
      var me = this;
      //意义同getUpperData()
      return new Promise(function(resolve) {
        setTimeout(function() {
          //模拟加载完毕
          if (me.underTimes > 3) {
            return resolve([]);
          }

          //加载数据
          resolve([
            {
              direction: 1,
              id: me.underId + 1,
              type: 1,
              content: "向下滚动加载第 " + me.underTimes + " 条！",
              ctime: new Date().toLocaleString()
            },
            {
              direction: 2,
              id: me.underId + 2,
              type: 1,
              content: "向下滚动加载第 " + me.underTimes + " 条！",
              ctime: new Date().toLocaleString()
            }
          ]);
        }, 1000000);
        me.underId = me.underId + 2;
        me.underTimes++;
      });
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.msg {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
  height: 2rem;

  background: #2c3e50;
}
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  /* display: inline-block; */
}
</style>